const taksitValidation = () => {
    var radios = Object.values(paymentMethods).map((method) => {
        return `#${method.key}`
    });
    var anyChecked = radios.some(function (radio) {
        return $(radio).is(':checked');
    });

    radios.forEach(function (radio) {
        if (anyChecked) {
            $(radio).removeAttr('required');
        } else {
            $(radio).attr('required', true);
        }
    });
}

const detectMonthChange = () => {
    const elements = $('div[id*="-months"]');

    elements.each(function () {
        const observer = new MutationObserver(function (mutationsList) {
            mutationsList.forEach(function (mutation) {
                if (mutation.attributeName === 'style') {
                    if ($(mutation.target).is(':visible')) {
                        // Set months required
                        $('input[name="month_id"]').attr('required', true);
                    } else {
                        // Set months not required
                        $('input[name="month_id"]').removeAttr('required');
                    }
                }
            });
        });

        observer.observe(this, {
            attributes: true
        });
    });
};

const handleBranchSelection = (branches) => {
    const $branchInfo = $('#branchInfo');
    const $address = $('#branch-address');
    const $location = $('#branch-location');
    const $workHours = $('#branch-work_hours');

    const init = () => {
        $('#filial').on('change', onBranchChange);
    };

    const onBranchChange = ({
        target
    }) => {
        const selectedId = target.value;
        selectedId ? showBranchDetails(selectedId) : hideBranchDetails();
    };

    const showBranchDetails = (branchId) => {
        const branch = branches.find(({
            id
        }) => id == branchId);

        if (!branch) {
            return hideBranchDetails();
        }

        const {
            main_trans,
            latitude,
            longitude
        } = branch;
        const {
            address,
            work_hours
        } = main_trans ?? {};

        $address.text(address ?? '');
        $workHours.text(work_hours ?? '');
        $location.attr('href', `https://maps.google.com/maps?q=${latitude},${longitude}`);
        $branchInfo.addClass('active').show();
    };

    const hideBranchDetails = () => {
        $branchInfo.removeClass('active').hide();
        $address.empty();
        $workHours.empty();
        $location.attr('href', '#');
    };

    return {
        init
    };
};

const orderBranchesByDistance = (branches) => {
    const calculateDistance = (lat1, lon1, lat2, lon2) => {
        const R = 6371;
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return R * c;
    };

    const reorderSelectOptions = (userLat, userLon) => {
        const $filial = $('#filial');
        const $placeholder = $filial.children('option[value=""]').first();
        const $options = $filial.children('option[value!=""]').detach();

        const optionsWithDistance = $options.map(function () {
            const branchId = $(this).val();
            const branch = branches.find(b => b.id == branchId);
            const distance = branch ? calculateDistance(userLat, userLon, branch.latitude, branch.longitude) : Infinity;
            console.log({
                distance,
                title: branch.main_trans?.title
            })
            return { element: this, distance };
        }).get();

        optionsWithDistance.sort((a, b) => a.distance - b.distance);

        $filial.empty();
        $filial.append($placeholder);
        optionsWithDistance.forEach(item => {
            $filial.append(item.element);
        });
    };

    const requestGeolocation = () => {
        if (!navigator.geolocation) {
            console.log('Geolocation is not supported by this browser.');
            return;
        }

        navigator.geolocation.getCurrentPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                reorderSelectOptions(latitude, longitude);
            },
            (error) => {
                console.log('Geolocation error:', error.message);
            }
        );
    };

    return {
        requestGeolocation
    };
};

$(document).ready(function (e) {
    const branchManager = handleBranchSelection(branches);
    branchManager.init();
    orderBranchesByDistance(branches).requestGeolocation()
    const phoneNumber = document.getElementById('phone_number');
    const leoBankPhoneNumber = document.getElementById("leobank_phone_number");
    const installment_price = $(".price").data('installment-price');
    const total_cache_price = $('.total_price').data('total-cache-price');
    const total_installment_price = $(".total_price").data('total-installment-price');

    const maskOptions = {
        mask: '000 00 00'
    };

    if(phoneNumber) {
        IMask(phoneNumber, maskOptions);
    }

    if(leoBankPhoneNumber) {
        IMask(leoBankPhoneNumber, maskOptions);
    }

    $("#basket-count").removeClass('d-none').text(count);

    $(document).on('click', 'input[id*="payment"]', function (e) {
        $('input[name="payment_provider"]').prop('checked', false);
        $(".discount").show();
        $('.total_price').text(`${total_cache_price} AZN`);
        $('input[name="payment_provider"]').removeAttr('required');
        $("#cards").hide();
        $('div[id*="-months"]').hide();
        $(".leobank-container").hide();
        $("#leobank_phone_number").removeAttr('required');
        $("#leobank_phone_number").val('');
        $("#commission-condition").addClass('d-none');

        $(".order-total-amount").text(`${total_cache_price}`);

        if (e.target.id == 'payment' + cashOnDelivery) {
            $("#CashOffline").prop("checked", true);
        }

        if (e.target.id == 'payment' + cashInStore) {
            $("#CashOffline").prop("checked", true);
        }

        if (e.target.id == 'payment' + installmentMethod) {
            if (total_installment_price >= installment_price) {
                $(".discount").hide();
            }
            $('.total_price').text(`${total_installment_price} AZN`);
            $(".order-total-amount").text(`${total_installment_price}`);
            $("#CreditChargeFree").prop("checked", true);
            $("#commission-condition").removeClass('d-none');
        }

        if (e.target.id == 'payment' + cashOnlineMethod) {
            $("#CASH").prop("checked", true);
        }

        if (e.target.id == 'payment' + taksitMethod) {
            $("#cards").show();
            taksitValidation();
        }

        return;
    })

    $('input[name="payment_provider"]').on('click', function (e) {
        $(".leobank-container").hide();
        $("#leobank_phone_number").removeAttr('required');
        $("#leobank_phone_number").val('');
        if (e.target.value == leoBankProvider) {
            console.log('LEOBANK');
            $("#leobank_phone_number").attr('required', true);
            $(".leobank-container").show();
        }
        const text = $(e.target).next('label').find('.checkout__taksits__name').text();
        const img = $(e.target).next('label').find('img').attr('src');
        const taksitProvider = e.target.id;
        $("#cards").hide();
        $(`#${e.target.id}-months`).show();
        $("#taksit_img").attr('src', img);
        $("#taksit_title").text(text);
    })

    detectMonthChange();

    $('a[id*=taksit_change]').on('click', function (e) {
        e.preventDefault();
        $("#cards").show();
        $('div[id*=-months]').hide();
    })

    $('input[name="shipping"]').on('change', function (e) {
        updateShippingInputs();
    });

    setTimeout(() => {
        updateShippingInputs();
    }, 1000);

    function updateShippingInputs() {
        if($('input[name="shipping"]:checked').val() == shippingPickup) {
            $("#address").removeAttr('required', false);
            $("#filial").attr('required', true);
        } else {
            $("#filial").removeAttr('required', false);
            $("#address").attr('required', true);
        }
    }

    $("#mobile_check").on('change', function (e) {
        if ($(this).is(':checked')) {
            $("#terms").prop('checked', true);
        } else {
            $("#terms").prop('checked', false);
        }
    });

    $("#AccountBasketCheckout").on('submit', function (e) {
        e.preventDefault();
        if (e.target.checkValidity()) {
            const shippingTier = $(`label[for="${$('input[name="payment_method"]:checked').attr('id')}"]`).text().trim();

            emitDataLayerEvent(products, 'add_payment_info', {
                'shipping_tier': shippingTier,
                'enhanced_conversion_data': {
                    "email": $("#email").val(),
                    "phone_number": '+994' + $("#prefix :selected").val().substr(-2) + $("#phone_number").val().replace(/\s+/g, ''),
                    "address": {
                        "first_name": $("#full_name").val().split(" ")[0] ?? $("#full_name").val(),
                        "last_name": $("#full_name").val().split(" ")[1] ?? $("#full_name").val(),
                    },
                },
            });
            setTimeout(() => {
                e.target.submit();
            }, 500);
        }
    });
});